<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="flash.css" />
		<style type="text/css">
			#s1,
			#s2,
			#s3 {
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>

	<body>

		<!--
分析功能：
1、左右箭头切换图功能
	切换小圆点。
	onclick
	
2、单击小原点时候也能换图
	点击哪个小圆点，哪个小圆点对应图片显示。
	onclick 

3、淡入淡出效果。
   left
   transition

	
-->
		<section id="s1">
			<div class="flash">
				<ul>
					<li class="now">A</li>
					<li>B</li>
					<li>C</li>
				</ul>
				<ol>
					<li class="nowx"></li>
					<li></li>
					<li></li>
				</ol>
				<nav>
					<a href="#"> &lt; </a>
					<a href="#"> &gt; </a>
				</nav>
			</div>
		</section>

		<section id="s2">
			<div class="flash">
				<ul>
					<li class="now">A</li>
					<li>B</li>
					<li>C</li>
				</ul>
				<ol>
					<li class="nowx"></li>
					<li></li>
					<li></li>
				</ol>
				<nav>
					<a href="#"> &lt; </a>
					<a href="#"> &gt; </a>
				</nav>
			</div>
		</section>

		<section id="s3">
			<div class="flash">
				<ul>
					<li class="now">A</li>
					<li>B</li>
					<li>C</li>
				</ul>
				<ol>
					<li class="nowx"></li>
					<li></li>
					<li></li>
				</ol>
				<nav>
					<a href="#"> &lt; </a>
					<a href="#"> &gt; </a>
				</nav>
			</div>
		</section>
		<script type="text/javascript">
			function myMove(_id) {
				var arrs = document.querySelectorAll(_id + " nav a");
				var lisx = document.querySelectorAll(_id + " ol li");
				var ul = document.querySelector(_id + " ul");
				var lis = document.querySelectorAll(_id + " ul li");
				var flash = document.querySelector(_id + " .flash");
				var i = 0;
				//单击左边		
				arrs[0].onclick = Pre;
				//单击右边箭头
				arrs[1].onclick = Next

				function Next() {
					i < (lis.length - 1) ? i++ : null;
					ul.style.left = -i * 300 + "px";
					MyIni(i)
				}

				function Pre() {
					i >= 1 ? i-- : null;
					ul.style.left = -i * 300 + "px";
					MyIni(i)
				}

				function MyIni(k) {
					for(var j = 0; j < lisx.length; j++) {
						lisx[j].className = "";
					}
					lisx[k].className = "nowx";
				}

			}

			myMove("#s1");
			myMove("#s2");
			myMove("#s3");
		</script>
	</body>

</html>